﻿

/*Main*/
body{
    overflow-y: scroll;
}
.main-page{
    width:100%;
    margin:0;
    /*border: 1px solid green;*/
    margin-top:20px;
    clear:left;
}
.main-compare{
    height:600px;
}
.main-news{
    height: 300px;
}
.main-item {
    
    width: 290px;
    /*height:300px;*/ /*改動態*/
    /*margin: 14px 7px 0 7px;*/
    margin:14px 7px 17px 7px;
    border-radius: 8px;
    background: #fff;
    box-shadow: rgba(0,0,0,0.22) 0 1px 2px 0;
    /*float: left;*/
    
    /*clear:both;*/
    display: inline-block;
}
.item-wrapper{
    position: relative;
}
.item-image-cmd-wrapper{

}
.compare-cmd-wrapper{
    left: 12px;
}
.like-cmd-wrapper{
    right: 12px;
}
.compare-cmd-wrapper, .like-cmd-wrapper{
    position: absolute;
    top: 12px;
    z-index: 101;
}
.compare-cmd-wrapper button, .like-cmd-wrapper button{
    display: none; /*隱藏ItemBtn*/
}
.item-image-holder{
    position: relative;
    z-index: 1;
}
.item-image-wrapper{
    /*box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;*/
    height: 299px;
    width: 290px;
    border-radius: 8px 8px 0 0;
    padding: 0;
    position: relative;
    cursor: -webkit-zoom-in;

    display:table-cell; 
	text-align:center; 
	vertical-align:middle;


}

.item-image{
    /*box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;*/
    border-radius: 8px 8px 0 0;
    margin: 0 auto;
    /*display:table;*/
    display: table-cell;
    /*max-height: 400px;*/
    max-height: 300px;
    max-width: 290px;
    /*z-index:5;*/
    padding:25px 10px 0px 10px;

    vertical-align:middle;
    
   
}
/*預覽部分*/
.item-article{
    padding: 6px 14px 7px;
    max-height: 45px;
    max-width: 290px;
}
.item-title{
    color: #000;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding: 0;
    margin: 5px 0;
}
/*預覽部分*/

/*Category Menu
.category-icon{
float: left;
width:80px;
height:100px;
text-align: center;
cursor: pointer;
padding-top: 5px;
opacity: 0.3;
background: ;
}

.category-icon{
        float: left;
    width:60px;
    height:80px;
    cursor: pointer;  鼠標
    opacity: 0.2;
    background: ;
    }
.category-icon h6{
    color: #fff;
    margin-top: -2px;
}
.category-phone{
    background:  #70bdff;
    background:  #fff0d1;
    background:#333333;
    background:#ff0000;
}
.category-pad{
    background:  #50ffa4;
    background:  #fff0d1;
    background:#333333;
    background:#f7931e;
}
.category-wear{
    background:  #ffa961;
    background:  #fff0d1;
    background:#333333;
    background:#007dd0;
}
.category-back{
    padding-top: 0;
    float: left;
    width: 20px;
    height: 100px;
    background: #808080;
    opacity: .3;
    cursor: pointer;
}
.category-go{
    height: 100px;
    cursor: pointer;
    position: relative;
}
.category-go span{
    position: absolute;
    right: 10px;
    bottom: 0;
}
.category-back img{
    display: block;
    margin: 42.5px 2.5px;
}
.iconphone{
    width:60px;
    height:60px;
    background: url('../images/category-icon.png') 0 -60px  no-repeat;
    display: inline-block;
    }

.iconphone:hover{
    width:60px;	
    height:60px;
    background: url(../images/category-icon.png) 0 -120px no-repeat ;
    display: inline-block;
    }
    
.icontablet{
    width:60px;	
    height:60px;
    background: url(../images/category-icon.png) -60px -60px no-repeat ;
    display: inline-block;
    }
.icontablet:hover{
        width:60px;
    height:60px;
    background: url(../images/category-icon.png) -60px -120px no-repeat ;
    display: inline-block;
    }

.iconwear{
    width:60px;	
    height:60px;
    background: url(../images/category-icon.png) -120px -60px no-repeat ;
    display: inline-block;
    }
.iconwear:hover{
        width:60px;
    height:60px;
    background: url(../images/category-icon.png) -120px -120px no-repeat ;
    display: inline-block;
    }
Category Menu
Main*/

/*News*/
.news-container, .news-content{
    /*display: inline-block;*/
    /*overflow: auto;*/
}
.news-container{
    display:inline;
    width: 290px;
    margin: 14px 5px 0 7px;
    border-radius: 8px;
    background: #fff;
    box-shadow: rgba(0,0,0,0.22) 0 1px 2px 0;
    /*display: inline-block;*/
    float: left;
}
.news-top{
    padding: 10px 5px 10px 5px;
    /*text-align: center;*/
    margin: 0 auto;
    height: 45px;
    box-shadow: rgba(0,0,0,0.1) 0 1px 0 0;
    vertical-align: middle;
}
.news-top>span{
    font-size: 18px;
    /*color: #242424;*/
    color: #FF6600;
    margin-left:10px;
    text-decoration: none;
}

.news-bottom{
    height: 20px;
    padding: 10px;
    float:right;
    bottom:0px;
    margin-right:15px;
    margin-bottom:30px;

}
.news-bottom > a {
     font-size: 18px;
    color: #AAA;
    text-decoration: none;
}
    .news-bottom > a:hover {
        color: #808080;
    text-decoration: none;
    }
/*News*/


/*Compare Box*/
.compare-box-container{
    z-index: 400;
    height: 150px;
    width: 700px;
    position: fixed;
    top: 50px;
    left: 50%;
    margin-left: -350px;
    background: #fff;
    /*background: rgba(0,0,0,0.5);*/
    border-radius: 0 0 6px 6px;
    box-shadow: rgba(0,0,0,0.22) 0 1px 2px 0;
    padding: 17px 11px 17px 11px;
    display: none;
}
.compare-box-left, .compare-box-right{
    height: 100%;
    float: left;
}
.compare-box-right{
    margin-top: 5px;
}
.compare-box-left{
    width: 40px;
    display: table;
    white-space: normal;
}
.compare-box-left>span{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: 20px;
    color: #fff;
    text-decoration: none;
}
.compare-box-middle{
    /*background: #afff8f;*/
    float: left;
    height: 100%;
    width: 575px;
    padding: 0 12.5px 0 12.5px;
}
 .compare-item-phone, .compare-item-pad, .compare-item-wear{
     width:100%;
     height:100%;
 }
 .compare-cate-choose{
     background-color: rgba(0,0,0,0.1);
 }
.compare-box-right div{
    border-bottom: 1px solid rgba(0,0,0,0.1);
    display: table;
    width: 100%;
    height: 37px;
    text-align: center;
}
.compare-box-right div:hover{
    border: none;
    cursor: pointer;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,.1);
}
.compare-box-right span{
    display: table-cell;
    vertical-align: middle;
}
.compare-img-container{
    height: 90px;
    width: 110px;
}
.compare-box-item{
    position: relative;
    width: 110px;
    height: 116px;
    text-align: center;
    float: left;
    opacity:0;
}
.compare-box-cancel{
    position: absolute;
    top: -4px;
    left: -2px;
    width: 115px;
    height: 130px;
    z-index: 300;
    border-radius: 3px;
    background: rgba(0,0,0,0.3);
    opacity: 0;
}
.compare-box-cancel:hover{
    cursor: pointer;
    opacity: 1;
}
.compare-box-item .box-item-img{
    max-height: 90px;
    max-width: 110px;
}
.compare-box-item p{
    width: 110px;
    height: 20px;
    font-size: 10px;
}
.compare-box-container>.compare-box-shrink{
    position: absolute;
    top: 5px;
    right: 5px;
    opacity: 0.2;
    cursor: pointer;
}
.compare-box-container>.compare-box-shrink:hover{
    opacity: 0.9;
}
/*Compare Box*/

/*UboxTemplate*/
.ubox-content{
    cursor: default;
    width: 600px;
    /*height: 900px;*/
    margin: 0 auto;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.ubox-top{
    background-color: #f8f8f8;
    background-color: rgba(248, 248, 248, 0.9);
    border-radius: 6px 6px 0 0;
    box-shadow: 0 2px 2px 1px rgba(0,0,0,0.1);
    border-bottom: 1px solid  rgba(0, 0, 0, 0.1);
    cursor: default;
    height: 56px;
    padding: 9px 15px;
    margin: 0;
    
}
.btn-right{
    float: right;
    margin-left: 10px;
}
.ubox-middle{
    /*height: 500px;*/
    margin: 0;
}
.article-top{
    padding-bottom: 30px;
}
.article-title{
    text-align: center;
}
.article-author{
    /*float: left;*/ 
    margin-left: 20px;
}
#imgAuthorPhoto{
    width: 20px;
    height: 20px;
    margin-right: -4px;
}
.article-date{
    float: right;
    margin-right: 20px;
}
.article-content{
    margin: 5px 10px 0 10px;
}
.article-content img{
    max-width: 500px;
}


.ubox-cover{
    padding: 20px 0;
    margin: 0 auto;
    box-shadow: 0 2px 2px 1px rgba(0,0,0,.1);
}
.ubox-cover > img{
    display: block; 
    margin: 0 auto;
}
.ubox-bottom{

}
/*UboxTemplate*/

/*UboxReader*/
.black-container{
    cursor: -webkit-zoom-out;
    z-index: 1500;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 40px;
    background-color: rgba(255, 255, 255, 0.6);
    overflow-y: auto; /*垂直滾輪*/
    display: none;
    
}
.reader-top, .reader-container, .recommend-container,
.introduction-container, .reader-bottom,
.reader-rigth-container, .reader-bottom-left{
    /*border: 1px solid white;*/
}
.reader-top{
    width: 930px;
    margin: 15px auto 0 auto;
}
.reader-bottom{
    width: 930px;
    margin: 15px auto 0 auto;
    /*overflow: auto;*/
}
.reader-bottom-left{
    width: 600px;
}
@media screen and (max-width:649px) {
    .reader-bottom {
        width:100%;
        margin:0 auto;
    }
    .reader-bottom-left {
        width:100%;
        margin:0 auto;
    }
}


.reader-container{
    float: left;
}
.reader-rigth-container{
        overflow: hidden;
}
.recommend-container{
        margin-left: 10px;
}
.introduction-container {
    margin-left: 10px;
}
/*UboxReader*/

/*UboxRecommend*/
.recommend-content{
    cursor: default;
    width: 300px;
    margin: 0 auto 25px auto;
    padding-bottom: 5px;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.recommend-top, .recommend-bottom, .recommend-bottom,  .recommend-top-contenet{
            /*border: 1px solid green;*/
}
.recommend-top{
    padding: 18px 6px;
    height: 56px;
    background-color: rgba(221, 221, 221, 0.9);
    box-shadow: 0 2px 2px 1px rgba(0,0,0,.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px 6px 0 0;
}
.recommend-top-contenet{
    padding-top:5px;
    margin:auto;
    text-align: center;
}
.recommend-top img{
    height: 28px;
    width: 28px;
}
.recommend-bottom{
    height: 420px;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 5px;
    padding-bottom: 10px;
    padding-top:10px;
    background:#fff;
    /*border: 1px solid rgba(0,0,0,.1);*/
}
.recommend-bottom img{
    padding-top:5px;
    width: 80px;
    /*height: 150px;*/
    margin: 2px;
    opacity: 0.5;
}

.recommend-bottom img:hover{

    opacity: 1;
}
/*UboxRecommend*/

/*UboxIntroduction*/
.introduction-content{
    cursor: default;
    width: 300px;
    margin: 0 auto 15px auto;
    padding-bottom: 5px;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

    .introduction-content:hover {
        opacity:0.9;
    }
.introduction-top, .introduction-bottom, .introduction-bottom,  .introduction-top-contenet{
            /*border: 1px solid green;*/
            word-break: break-all;
}
.introduction-top{
    padding: 13px 6px;
    height: 56px;
    background-color: rgba(248, 248, 248, 0.9);
    box-shadow: 0 2px 2px 1px rgba(0,0,0,.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px 6px 0 0;
}
.introduction-top-contenet{
    height: 30px;
    margin:auto;
    text-align: center;
    line-height:30px;
}
    .introduction-top-contenet > h4 {
        font-weight:bolder;
    }
.introduction-middle{
    padding-top: 10px;
    text-align: center;
    
   
}
.introduction-middle>h5{
    display: inline;
    font-weight:bolder;
    color:#0099FF;
}
.introduction-bottom{
    min-height: 260px;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 10px;
    padding-bottom: 15px;
    /*border: 1px solid rgba(0,0,0,0.1);*/
    padding:10px;
    
}
.introduction-bottom img{
    width: 80px;
    margin: 2px;
    opacity: 0.5;
}
/*UboxIntroduction*/

/*UboxMessageBoard*/
.message-board-content{
    cursor: default;
    width: 600px;
    padding: 15px;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
@media screen and (max-width:649px) {
    
    .message-board-content{
        width:100%;
       
        /*margin:0 auto;*/
    }
    .container {
        width:100%;
    }
    
 
}
.message-board-top{
}
.message-board-middle{
}
.msg-container{
    margin-bottom: -5px;
    word-break: break-all;
}
.msg-container>h5, h6, img{
    display: inline;
    word-break: break-all;
}
.msg-container img{
    width: 30px;
    height: 30px;
    max-height:60px;
    max-width:550px;
}
.msg-container p{
    margin: 25px 0 -10px 0;
    word-break: break-all;
}
.message-board-bottom {
    overflow: auto;
    margin-top:15px;
}
.message-board-bottom button{
    margin-top: 5px;
    float: right;
}
/*UboxMessageBoard*/

